<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>拖拽图片上传</title>
	<style type="text/css">
	.up{width: 500px;min-height: 500px;margin:50px auto;background: rgba(0,0,0,0.3);position: relative;}
	.up img{width: 50px;height: 50px;margin: 10px;}
	.up p{font-size: 24px;color: #fff;padding-top: 200px;text-align: center}
		
	</style>
</head>
<body>
	<div class="up">
		<p>请将图片内容拖到此处</p>
	</div>
	<script type="text/javascript" src="jquery_2.1.4.js"></script>
	<script type="text/javascript">
		var odiv=$('.up').get(0);
		var op=$('p');
		odiv.ondragenter=function(){
			op.html("可以释放内容");
		}
		odiv.ondragleave=function(){
			op.html("请将图片内容拖到此处");
		}
		odiv.ondragover=function(e){
			e.preventDefault();
		}
		odiv.ondrop=function(e){
			e.preventDefault();

			var fs=e.dataTransfer.files//读取文件

			var len=fs.length;//文件个数

			for (var i = 0; i < len; i++) {

				var _type=fs[i].type;//文件的类型

				if (_type.indexOf('image')!=-1) {

					var fd=new FileReader();//读取文件对象

					fd.readAsDataURL(fs[i]);//读取文件的路径

					fd.onload=function(){
						var o="<img src='"+this.result+"' /> ";
						$(".up").append(o);
						$("p").html("");
					}

				}else{
					alert("请上传图片！！！")
				}
			}
		}
	</script>

</body>
</html>